<template>
  <transition name="slide-up">
    <div class="head">
      <div class="fileName">
        <span class="logo"></span>
        <span class="name" :title="headerInfo.curName">{{headerInfo.curName}}</span>
      </div>
      <div class="headBtn" v-show="!historyInfo.showVersionInfo">
        <span v-show="headerInfo.abandonBtnShow" class="saveBtn" @click="backdownMedal">重新认证</span>
        <span v-show="headerInfo.saveBtnShow" class="saveBtn" @click="save">保存</span>
        <span v-show="headerInfo.repulseBtnShow" class="saveBtn warnBtn" @click="repulseMark">打回</span>
        <span v-show="!headerInfo.isRecheck && headerInfo.submitBtnShow" class="saveBtn submitBtn" 
        @click="submit" >提交</span>
        <a class="saveBtn submitBtn" v-show="headerInfo.closeBtnShow" @click="close()">关闭</a>
      </div>
      <div class="headBtn" v-show="historyInfo.showVersionInfo">
        <span class="saveBtn" @click="closeVersion">返回</span>
        <span class="saveBtn submitBtn" @click="recoverVersion">恢复到该版本</span>
      </div>
      <div class="info">
        <!-- <span class="history theme" @click="changeTheme"></span> -->
        <span class="shortcut cut" v-if="headerInfo.shortcutBtnShow && headerInfo.shortcutkeys.length > 0">
          快捷键
          <b style="margin-left: 10px;color: #e2e2e2;">|</b>
          <div class="showBox" style="color: #000;">
            <div class="table">
              <div v-for="item in headerInfo.shortcutkeys" :key="item.key">
                <span v-html="item.name"></span>
                <span>
                  <i v-html="item.key"></i>
                </span>
              </div>
            </div>
          </div>
        </span>
        <span class="shortcut rule" v-if="headerInfo.standardBtnShow">
          标注规范
          <b style="margin-left: 10px;color: #e2e2e2;">|</b>
          <div class="showBox">
            <div class="box" v-html="headerInfo.standardCnt"></div>
          </div>
        </span>
        <span class="history" @click="showHistory" v-if="headerInfo.historyBtnShow">历史</span>
      </div>
      <!-- <i style="margin-top:5px;float:right;cursor:pointer;" @click="robot()">
        <img style="display:inline-block;" src="@/assets/images/common/客服.svg" alt />
      </i> -->
    </div>
  </transition>
</template>
<script>
export default {
    name: "Header",
    data() {
        return {};
    },
    props: {
        headerInfo: {
            type: Object,
            default: () => ({})
        },
        historyInfo: {
          type: Object,
          default: ()=>({})
        }
    },
    created: function() {},
    mounted() {},
    methods: {
        robot: function() {
            var url = "/open/robot";
            window.open(url);
        },
        // 保存任务
        save: function() {
            this.$emit("save");
        },
        // 提交任务
        submit: function() {
            this.$emit("submit");
        },
        // 显示历史弹窗
        showHistory() {
            this.$emit("showHistory");
        },
        changeTheme: function() {
            this.$emit("changeTheme");
        },
        // 关闭历史弹窗
        closeVersion: function() {
            this.$emit("closeVersion");
        },
        // 恢复到该版本
        recoverVersion: function() {
            this.$emit("recoverVersion");
        },
        // 打回任务
        repulseMark: function() {
            this.$emit("repulseMark");
        },
        // 重新认证
        backdownMedal: function() {
            this.$emit("backdown");
        },
        // 关闭页面
        close(){
           window.close()
        }
    },
    beforeDestroy() {}
};
</script>
<style lang="less">
.head {
    height: 50px;
    width: 100%;
    min-width: 1366px;
    padding: 0 20px;
    border: 1px solid #c5cccb;
    overflow: hidden;
    background: #fff;
    box-sizing: border-box;
    &:hover {
        overflow: visible;
    }
    .fileName {
        width: 680px;
        float: left;
        line-height: 50px;
        .logo {
            display: inline-block;
            float: left;
            width: 40px;
            height: 50px;
            background-image: url(" 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");
            background-repeat: no-repeat;
            background-position: left;
        }
        .name {
            display: inline-block;
            text-align: left;
            float: left;
            width: 460px;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            font-weight: bold;
            font-size: 16px;
        }
    }
    .info {
        // width: 240px;
        padding: 0 8px;
        float: right;
        line-height: 50px;
        text-align: center;
        & > span {
            display: inline-block;
            /*width: 60px;*/
            margin-right: 10px;
        }
    }
    .headBtn {
        /*width: 350px;*/
        float: right;
        text-align: right;
    }
    .theme {
        display: inline-block;
        width: 20px;
        height: 14px;
        position: relative;
        top: 2px;
        background: url("")
            no-repeat center center;
    }
}
.head.slide-up-leave-active:hover,
.head.slide-up-enter-active {
    overflow: hidden;
}
.hide {
    overflow: hidden;
}
.saveBtn {
    display: inline-block;
    background: #ffffff;
    border: 1px solid #bdbdbd;
    border-radius: 2px;
    /*width: 100px;*/
    padding: 0 26px;
    height: 28px;
    text-align: center;
    line-height: 28px;
    cursor: pointer;
    margin-top: 11px;
    margin-left: 10px;
    /*float: right;*/
}
.submitBtn {
    background: #14cb6b;
    border: 1px solid #14cb6b;
    color: #fff;
}
.warnBtn {
    background: #ff6750;
    color: #fff;
    border: 1px solid #ff6750;
}
/*快捷键*/
.shortcut {
    position: relative;
    cursor: pointer;
    word-break: break-word;
    &:hover .showBox {
        display: block;
    }
    .showBox {
        position: absolute;
        background: #fff;
        width: 300px;
        padding: 10px;
        -webkit-box-shadow: 0 0 10px rgba(155, 155, 155, 0.5);
        -moz-box-shadow: 0 0 10px rgba(155, 155, 155, 0.5);
        -ms-box-shadow: 0 0 10px rgba(155, 155, 155, 0.5);
        -o-box-shadow: 0 0 10px rgba(155, 155, 155, 0.5);
        box-shadow: 0 0 10px rgba(155, 155, 155, 0.5);
        z-index: 999;
        border-radius: 3px;
        top: 50px;
        transform: translateX(-85%);
        display: none;
        &:before {
            content: "";
            position: absolute;
            top: -14px;
            right: 38px;
            border-width: 7px;
            border-style: dashed dashed solid dashed;
            border-color: transparent transparent #fff transparent;
            font-size: 0;
            line-height: 0;
        }
        .box{
          background-color: #fff;
        }
    }
}

.history {
    cursor: pointer;
}
/*.showBox table{*/
/*width: 100%;*/
/*line-height: 20px;*/
/*}*/
.shortcut .showBox .table {
    width: 100%;
    max-height: 180px;
    overflow: auto;
}

.shortcut .showBox .table div:after {
    content: "";
    display: table;
    clear: both;
}

.cut {
    .showBox {
        transform: translateX(-78%);
        padding: 0 10px;
        .table span {
            display: inline-block;
            width: 50%;
            float: left;
            text-align: center;
            line-height: 40px;
        }
        .table span i {
            display: inline-block;
            padding: 3px 10px;
            background-image: linear-gradient(
                -180deg,
                #f0f0f0 0%,
                #e2e2e2 100%
            );
            border-radius: 2px;
            height: 20px;
            line-height: 15px;
            font-size: 12px;
        }
    }
}

.rule {
    color: #000;
    line-height: 20px;
    text-align: left;
    line-height: 50px;
    height: 50px;
    .showBox {
        line-height: 20px;
        max-height: 200px;
        width: 500px;
        .box {
            max-height: 180px;
            padding: 10px 0;
            overflow: auto;
            img {
                width: 100%;
            }
        }
    }
}

p {
    margin: 0;
}
</style>
